<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>快切网页制作助手 - 超好用的网页制作&amp;专题制作助手 - 2015必备前端工具 - 勤道快切网页制作助手</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta name="searchtitle" content="切助手,网页制作,制作网页,网页制作软件,网页制作工具,网页制作助手,免费网页制作,免费网页制作软件,简单网页制作,网站专题制作,网页专题制作,专题网页制作,网页切图,切页面,切网页,切图软件,切图工具,切图助手,网页制作教程,网页制作视频教程,网页制作学习教程,勤道快切助手">
    <meta name="title" content="切助手,网页制作,制作网页,网页制作软件,网页制作工具,网页制作助手,免费网页制作,免费网页制作软件,简单网页制作,网站专题制作,网页专题制作,专题网页制作,网页切图,切页面,切网页,切图软件,切图工具,切图助手,网页制作教程,网页制作视频教程,网页制作学习教程,勤道快切助手">
    <meta name="description" content="史上最好用的在线网页制作工具,切图工具并快速导出html，css样式和切片，支持响应式布局，一站打通电脑，平板，手机。" />
    <meta name="keywords" content="切助手,网页制作,制作网页,网页制作软件,网页制作工具,网页制作助手,免费网页制作,免费网页制作软件,简单网页制作,网站专题制作,网页专题制作,专题网页制作,网页切图,切页面,切网页,切图软件,切图工具,切图助手,网页制作教程,网页制作视频教程,网页制作学习教程,勤道快切助手" />
    <link rel="shortcut icon" href="images/favicon.ico" />
    <link rel="stylesheet" href="css/global.css" />
    <link rel="stylesheet" href="../../resources/css/help.css"/>
</head>
<body>
<div id="main">
  <div class="content">
    <h1>视频教程</h1>
    <p>软媒魔方首页切图高清视频演示：<a href="http://pan.baidu.com/s/1jGvjzQe" title="网页制作视频教程" target="_blank">http://pan.baidu.com/s/1jGvjzQe</a> （0间距色差识别、自动切图）</p>
    <p>小米商城首页切图高清视频演示：<a href="http://pan.baidu.com/s/1dDCU9jF" title="网页制作视频教程" target="_blank">http://pan.baidu.com/s/1dDCU9jF</a> （间距识别、自动切图）</p>
  </div>
  <div class="content">
    <h1>1 载入用例图片，并创建选区</h1>
    <p>首先，我们为你准备了一张用例图片，【<a title="网页制作用例图下载" href="../demohour.png" download="demohour.png">点此下载</a>】，下载后导入到页面中，页面会自动弹出设置对话框，设置对话中提供了一些默认的参数，请根据页面规格尺寸修改配置，如下图所示：。</p>
    <p class="center"><img alt="网页制作流程01" src="help/01.png"></p>
    <h3>1.1 参数设置</h3>
    <p>在这里我们设置页宽：960px，间距：0，背景色默认：#E6E6E6。</p>
    <p class="center"><img alt="网页制作流程02" src="help/02.png"></p>
    <p><b>参数说明：</b></p>
    <p>页宽：这里需要注意，页宽并非是网页设计效果图的宽度，而是指我们要将内容限定的区域，即：页面主体的宽度，请保持页面主体在网页设计效果图的中间位置。</p>
    <p>间距：这里指的是选区之间的距离，快切助手根据选区的位置和大小裁剪图片。</p>
    <p>背景色：如果网页由多屏颜色构成，也可不用设置，但在间距大于0时使用自动切图功能必须指定背景色，这是一种精确的切图方式，切图程序根据间距和背景色切分图像。</p>
    <h3>1.2 自动切图</h3>
    <p>此页面可以使用精确识别，也可使用模糊识别，精确识别时的参数请设置页宽：960px，间距：20px，背景色：#E6E6E6；模糊识别请设置间距为：0px，您可以使用两种方式分别进行设置，然后看采用不同方式时的切分效果，我们在这里使用模糊识别。</p>
    <p>自动切图功能能够自动创建选区，这里需要注意，并不是所有页面都可以使用自动切图。因为图像识别是基于图像特征的识别，所以在使用自动切图功能时，需要满足两个限定条件：</p>
    <p>一、精确识别：根据页宽和背景色进行识别，各选区需要有一致的背景色和间距，请设置“间距”，和“背景”。</p>
    <p class="center"><img alt="网页制作流程03" src="help/03.png"></p>
    <p>二、模糊识别：根据选区之间的色差进行识别。</p>
    <p class="center"><img alt="网页制作流程04" src="help/04.png"></p>
    <p>因为要区分渐变色和杂色，所以模糊识别会有一定误差，勤道团队还在不断优化图形识别算法。</p>
    <p>自上线以来，用户量增长迅速，用户量日渐庞大，节约您每一秒钟都将是勤道团队的毕生的奋斗目标。</p>
    <h3>1.3 手动切图</h3>
    <p>对于不满足自动切图限定条件的，我们需要使用【追加】功能手动创建选区，【追加】功能会在当前选区下方创建一个选区，手动创建选区也同样快速，高效。</p>
  </div>
  <div class="content">
    <h1>2. 调整选区大小，并拆分选区。</h1>
    <h3>2.1 调整选区大小</h3>
    <p>选区创建后，单击选区选中，显示附件工具栏，选区进入可编辑状态，我们可对选区进行拆分、向下合并、设置通栏，设置选区背景色、对选区进行分栏等。当鼠标移到选区下边框的位置，鼠标变为双箭头，此时选区可向上或向下调整。注意：为避免影响已创建的选区，只能在相邻的两个选区之间进行高度调节。</p>
    <p>使用自动切图功能有时并不能满足我们的切图需求，这时，我们可以使用拆分或合并功能来调节选区。如下图所示，使用【合并】功能依次合并选区。</p>
    <p class="center"><img alt="网页制作流程05" src="help/05.png"></p>
    <p>附加工具栏使用都很简单，请参看【<a href="/help.html" title="帮助",target="_blank">帮助文档</a>】，或在使用中体验。我们在这里仅演示对分栏功能。</p>
    <h3>2.2 拆分选区</h3>
    <p>我们在这里仅演示分栏功能，如上图所示：我们设置拆分2行，4列，边距：0，间距10px，拆分效果如下：</p>
    <p class="center"><img alt="网页制作流程07" src="help/07.png"></p>
  </div>
  <div class="content">
    <h1>3. 导出项目包</h1>
    <p>调整后，单击导出，设置页面标题、关键词和描述，输入导出包名，点击导出到本地，请稍等，项目会自动导出到浏览器默认的下载目录，是不是很酸爽。</p>
    <p class="center"><img alt="网页制作流程08" src="help/08.png"></p>
    <p>现在就试试，赶快【<a title="网页制作用例图下载" href="../demohour.png" download="demohour.png">下载用例图片</a>】吧</p>
  </div>
</div>
</body>
</html>